<template>
  <div style="width: 23px; height: 17px" class="absolute" :style="styleObj[position].container">
    <svg
      width="23px"
      height="17px"
      viewBox="0 0 23 17"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <path stroke="#00FFFF" stroke-width="3" :d="styleObj[position].d" fill="none" />
    </svg>
  </div>
</template>
<script lang="ts" setup>
import { CSSProperties } from "vue";

const props = defineProps<{
  position: "leftBottom" | "rightTop";
}>();

const styleObj: Record<(typeof props)["position"], { container: CSSProperties; d: string }> = {
  leftBottom: {
    container: {
      left: 0,
      bottom: 0,
    },
    d: "M1.5 0L1.5 10L11 15.5L23 15.5",
  },
  rightTop: {
    container: {
      right: 0,
      top: 0,
    },
    d: "M0 1.5L12 1.5L21.5 7L21.5 17",
  },
};
</script>
